<template>
  <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="赛事名称" prop="name"
          ><el-input v-model="form.name" placeholder="请输入赛事名称" />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactTelno"
          ><el-input v-model="form.contactTelno" placeholder="请输入联系电话"
        /></el-form-item>
        <!-- <el-form-item label="赛事项目" prop="projectId">
          <el-select
            v-model="form.projectId"
            style="width: 100%"
            @change="changeFN"
          >
            <el-option
              v-for="item in dropDownList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              clearable
            />
          </el-select>
        </el-form-item> -->
      </el-col>
      <el-col :span="12">
        <el-form-item label="比赛周期" prop="date2">
          <el-date-picker
            v-model="form.date2"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="赛事级别" prop="level"
          ><el-input v-model="form.level" placeholder="请输入赛事级别"
        /></el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="报名须知" prop="signKnowUrl">
          <FileUpload v-model="form.signKnowUrl1" :action="UploadUrl" />
        </el-form-item>
        <el-form-item label="背景" class="bgImg"  prop="bgImgUrl">
          <ImageUpload2 v-model="form.bgImgUrl" :limit="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="免责声明" prop="disclaimerUrl">
          <FileUpload v-model="form.disclaimerUrl1" :action="UploadUrl"
        /></el-form-item>
        <el-form-item label="logo" prop="logoUrl">
          <ImageUpload2 v-model="form.logoUrl" :cropHeight="300"  :cropWidth="400" :limit="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="竞赛规程" prop="ruleUrl">
          <FileUpload v-model="form.ruleUrl1" :action="UploadUrl"
        /></el-form-item>
        <el-form-item label="封面图"  prop="coverUrl">
          <ImageUpload2 v-model="form.coverUrl" :cropHeight="300"  :cropWidth="400" :limit="1" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button type="primary" @click="nextStep(id)">下一步</el-button>
    </el-row>
  </el-form>
</template>

<script setup name="bseConfig">
import { getBaseProjectList } from "@/api/oam/basic";
import { getCurrentInstance } from "@vue/runtime-core";
import { addList, editApi, updateApi } from "@/api/match/league";
import { useRoute } from "vue-router";
const router = useRoute();
const { proxy } = getCurrentInstance();
const dropDownList = ref();
const UploadUrl = ref("/upload/upLoadToFileServer");
const flag = ref(false);
const id = ref();
const props = defineProps({
  id: {
    type: String,
    default: undefined,
  },
});
const data = reactive({
  rules: {
    name: { required: true, message: "请输入赛事名称", trigger: "blur" },
    contactTelno: [
      {
        required: true,
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
    regionId: { required: true, message: "请选择赛事地区", trigger: "change" },
    projectId: { required: true, message: "请选择赛事项目", trigger: "change" },
    date1: [
      {
        required: true,
        message: "请选择报名日期",
        trigger: "change",
      },
    ],
    date2: [
      {
        required: true,
        message: "请选择比赛日期",
        trigger: "change",
      },
    ],
    projectName: { required: true, message: "请输入赛事项目", trigger: "blur" },
    address: { required: true, message: "请输入比赛日期", trigger: "blur" },
    level: { required: true, message: "请输入赛事级别", trigger: "blur" },
    // signKnowUrl: { required: true, message: "请上传文件", trigger: "blur" },
    // disclaimerUrl: { required: true, message: "请上传文件", trigger: "blur" },
    // ruleUrl: { required: true, message: "请上传文件", trigger: "blur" },
    bgImgUrl: { required: true, message: "请上传背景图片", trigger: "blur" },
    logoUrl: { required: true, message: "请上传logo图片", trigger: "blur" },
    coverUrl: { required: true, message: "请上传封面图片", trigger: "blur" },
  },
  form: {},
});
const { rules, form } = toRefs(data);

// 数据回显
if (props.id) {
  initData();
}
async function initData() {
  form.value.id = props.id;
  let res = await editApi(form.value);
  form.value = res.data;
  form.value.date2 = [];
  form.value.date2[0] = form.value.beginTime;
  form.value.date2[1] = form.value.endTime;
  form.value.ruleUrl1 = JSON.parse(form.value.ruleUrl);
  form.value.disclaimerUrl1 = JSON.parse(form.value.disclaimerUrl);
  form.value.signKnowUrl1 = JSON.parse(form.value.signKnowUrl);
}

// // 赛事项目下拉框
// dropList();
// function dropList() {
//   getBaseProjectList().then((response) => {
//     dropDownList.value = response.rows;
//   });
// }

function changeFN(val) {
  const item = dropDownList.value.find((item) => {
    return (item.id = val);
  });
  form.value.projectName = item.name;
}

const emit = defineEmits(["nextStep"]);

// 保存
function submitForm() {
  return new Promise((resolve, reject) => {
    proxy.$refs["formRef"].validate(async (valid) => {
      if (valid) {
        form.value.leagueId = 0;
        form.value.type = "1";
        form.value.beginTime = form.value.date2[0];
        form.value.endTime = form.value.date2[1];
        form.value.ruleUrl = JSON.stringify(form.value.ruleUrl1);
        form.value.disclaimerUrl = JSON.stringify(form.value.disclaimerUrl1);
        form.value.signKnowUrl = JSON.stringify(form.value.signKnowUrl1);
        let res = null;
        if (form.value.id) {
          // 修改
          res = await updateApi(form.value);
        } else {
          // 添加
          res = await addList(form.value);
        }
        if (res.code == 200) {
          id.value = res.data;
          form.value.id = res.data
          proxy.$modal.msgSuccess("保存成功");
          flag.value = true;
        } else {
          proxy.$modal.msgError("保存失败");
        }
      } else {
        proxy.$modal.msgError("请完善信息");
      }
      if (flag.value) {
        resolve("成功");
      } else {
        reject("失败");
      }
    });
  });
}

// 下一步
async function nextStep() {
  if (flag.value) {
    emit("nextStep", 1, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 1, id.value);
  }
}
</script>

<style scoped>
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}
:deep(.bgImg .fileItem) {
  width: 270px !important;
}

</style>
